<template>
    <div class="table_data">
      <PersonAdminHeader @onRefreshPersonChange="changeData"/>
      <el-table :data="personInfo" :cell-style="{'text-align':'center'}" :header-cell-style="{background: '#f8f8f9',textAlign: 'center'}">
        <el-table-column width="100" show-overflow-tooltip prop="id"  label="id"> </el-table-column>
        <el-table-column width="100" show-overflow-tooltip prop="username" label="用户名"> </el-table-column> 
        <el-table-column width="100" show-overflow-tooltip prop="roleName" label="职位"> </el-table-column>
        <el-table-column width="100" show-overflow-tooltip prop="sex" label="性别"> </el-table-column>
        <el-table-column width="200" show-overflow-tooltip prop="mobile" label="联系方式"> </el-table-column>
        <el-table-column show-overflow-tooltip label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="currentPage.total"
        ></el-pagination>
      </div>
      <PersonEditor :flag="false"/>
  </div>

</template>

<script>

import api from "../../../api";
import PersonAdminHeader from "./PersonAdminHeader.vue"
import PersonEditor from "./PersonAdminEditor.vue"
import qs from "qs";

export default {
  data(){
    return {
        personInfo:[],
        options:[{value:"技术员"},{value:"项目负责人"},{value:"超前监测"},{value:"监理人"}],
        value: '1' || '0',
        currentPage: {
          pageNo: 1,
          total: 0
        }
    }
  },
  components: {
    PersonAdminHeader,
    PersonEditor
  },
  mounted(){
     // 刷新列表
     this.$bus.$on('onRefreshPerson', (flag) => {
      this.http(1)
    })
    this.http(1)
  },
  methods: {
    http(page,type){
      api.personInfofindAllpage({page,type})
        .then((res) => {
          if(res.data.code == 2001){
          this.personInfo  = res.data.data.records
          this.currentPage.total = parseInt(res.data.data.total) 
        }
        })
        .catch((error) => {
          console.log(error);
        });
    },
      handleEdit(index, row){
        this.$bus.$emit('onShowPersonEditor', row)
      },
      handleDelete(index, row){
        let data = {
        id: row.id
      }
      this.$confirm('此操作将永久删除人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'warning'
      })
        .then(() => {
          api
            .personInfodeleteById(qs.stringify(data))
            .then((res) => {
              if (res.data.code == 2001) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.http(1,this.pId)
              } else {
                this.$message({
                  type: 'fail',
                  message: '删除失败!'
                })
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
    handleCurrentChange(val) {
      this.http(val)
    },
    changeData(roleid){
      this.http(1,roleid)
    }
      
  }
}
</script>

<style scoped>

.el-table{
  margin-top: 20px;

}
</style>